<template>
    <div>
        <h1>房型信息列表</h1>
        名称:<input type="text" v-model="info.name">
         <select v-model="info.add">
            <option value="">请选择</option>
            <option :value="item.aid" v-for="item in level" :key="item.aid">{{item.aname}}</option>  
        </select>
        <input type="button" value="搜索" @click="GetList">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>房型名称</td>
                   
                    <td>房型</td>
                    <td>图片</td>
                    <td>电话</td>
                    <td>状态</td>
                    <td>房间介绍</td>
                    <td>地址</td>
                    <td>操作</td>
                </tr>
                <tr v-for="value in infoo.list">
                    <td>{{value.name}}</td>
                    
                    <td>{{value.aname}}</td>
                    <td><img :src="value.img" width="100px" height="100px"></td>
                    <td>{{value.tel.substr(0,3)+"****"+value.tel.substr(7)}}</td>
                    <td>{{value.state==1?"启用":"禁用"}}</td>
                    <td>{{value.introduce}}</td>
                    <td>{{value.add}}</td>
                    <td><input type="button" value="修改" @click="Update(value.id)">
                        <input type="button" value="删除" @click="del(value.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        
    </div>
    <div>
        <span>总条数:{{infoo.totalnum}}</span>
        <span>总页数{{infoo.totalpage}}</span>
        <span>当前页:{{info.pageindex}}/{{infoo.totalpage}}</span>

        <input type="button" value="首页" @click="fn(1)">
        <input type="button" value="上一页" @click="fn(info.pageindex-1)">
        <input v-for="o in infoo.totalpage" type="button" :value="o" @click="fn(o)">
        <input type="button" value="下一页" @click="fn(info.pageindex+1)">
        <input type="button" value="尾页" @click="fn(infoo.totalpage)">
        <input type="text" v-model="info.pageindex">
        <input type="button" value="跳转" @click="fn(info.pageindex)">
        <select v-model="info.value" @change="GetList">
            <option :value="o" v-for="o in arr">每页{{o}}条</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import {ref,onMounted} from 'vue'
import router from '@/router'; 

onMounted(()=>{
    GetList();
    GetLevel();
})
let arr:any=ref([2,4,6])
const fn=(num:any)=>{
    if(num<1){
        info.value.pageindex=1;
        return;
    }
    if(num>infoo.value.totalpage){
        info.value.pageindex=infoo.value.totalpage
        return;
    }
    info.value.pageindex=num;
    GetList()
}

let info:any=ref({
    add:'',
    name:'',
    pageindex:1,
    pagesize:3
})
let level:any=ref([]);

let infoo:any=ref({
    list:[],
    totalnum:0,
    totalpage:0
})
const Update=(id:any)=>{
    router.push({
        path:'/Updatee',
        query:{
            id:id
        }
    })
}
const del=(id:any)=>{
    let f=(confirm("确认要删除吗?"))
    axios({
        url:'https://localhost:7058/api/Pro/del',
        method:'get',
        params:{
            id:id
        }
    })
    .then((res)=>{
        console.log(res)
        if(res.data>0){
            alert("删除成功")
            GetList();
        }
    })
    .catch((err)=>{
        console.log(err);
    })
}

//显示
const GetList=()=>{
    axios({
        url:'https://localhost:7058/api/Pro/GetList',
        method:'get',
        params:info.value
    })
    .then((res)=>{
        console.log(res);
        infoo.value=res.data
    })
    .catch((err)=>{
        console.log(err);
    })
}
//下拉
const GetLevel=()=>{
    axios({
        url:'https://localhost:7058/api/Pro/proLevels',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        level.value=res.data
    })
    .catch((err)=>{
        console.log(err)
    })
}
</script>

<style scoped>

</style>